<template>
  <el-dialog :model-value="visible" :title="currentTitle" :width="width" :before-close="handleCancel"
    class="crud-confirm-dialog">
    <div class="crud-confirm-content">
      <!-- 图标区域 -->
      <div class="confirm-icon">
        <el-icon :color="currentIconColor" :size="currentIconSize">
          <component :is="currentIcon" />
        </el-icon>
      </div>

      <!-- 文本内容区域 -->
      <div class="confirm-text">
        <p class="main-text">{{ currentContent }}</p>
        <p v-if="currentWarningTip" class="warning-tip">
          {{ currentWarningTip }}
        </p>
      </div>
    </div>

    <!-- 自定义内容插槽 -->
    <slot name="content" />

    <template #footer>
      <div class="dialog-footer">
        <CrudButton size="small" type="danger" @click="handleCancel">
          {{ currentCancelText }}
        </CrudButton>

        <CrudButton :type="currentConfirmType" size="small" :loading="loading" @click="handleConfirm">
          {{ currentConfirmText }}
        </CrudButton>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { Warning } from '@element-plus/icons-vue'
import { typeConfigs, getPreset } from './presets'
import type { CrudConfirmDialogProps, CrudConfirmDialogEvents } from './types'

/**
 * 组件名称定义
 */
defineOptions({
  name: 'CrudConfirmDialog'
})

/**
 * Props 定义
 */
const props = withDefaults(defineProps<CrudConfirmDialogProps>(), {
  loading: false,
  title: '确认操作',
  type: 'warning',
  deleteType: 'single',
  targetName: '',
  selectedCount: 0,
  content: '',
  warningTip: '',
  confirmText: '确定',
  cancelText: '取消',
  confirmType: 'primary',
  iconSize: 48,
  width: '400px'
})

/**
 * Events 定义
 */
const emit = defineEmits<CrudConfirmDialogEvents>()

// 监听 visible 属性变化，打印日志
watch(() => props.visible, (val, oldVal) => {
  console.log('[CrudConfirmDialog] visible changed:', oldVal, '=>', val)
})

/**
 * 计算当前预设配置
 */
const currentPreset = computed(() => {
  return props.preset ? getPreset(props.preset) : null
})

/**
 * 计算当前标题
 */
const currentTitle = computed(() => {
  // 优先使用预设配置中的标题
  if (currentPreset.value?.title) {
    return currentPreset.value.title
  }
  return props.title
})

/**
 * 计算当前图标
 */
const currentIcon = computed(() => {
  if (props.icon) {
    return props.icon
  }

  // 优先使用预设配置中的类型
  const type = currentPreset.value?.type || props.type
  const config = typeConfigs[type]
  return config?.icon || Warning
})

/**
 * 计算当前图标颜色
 */
const currentIconColor = computed(() => {
  if (props.iconColor) {
    return props.iconColor
  }

  // 优先使用预设配置中的类型
  const type = currentPreset.value?.type || props.type
  const config = typeConfigs[type]
  return config?.iconColor || '#E6A23C'
})

/**
 * 计算当前图标大小
 */
const currentIconSize = computed(() => {
  return props.iconSize
})

/**
 * 计算当前确认内容
 */
const currentContent = computed(() => {
  // 优先使用预设配置中的内容
  if (currentPreset.value?.content) {
    return currentPreset.value.content
  }

  // 如果有自定义内容，直接使用
  if (props.content) {
    return props.content
  }

  // 根据删除类型自动生成内容
  if (props.deleteType === 'single') {
    return props.targetName
      ? `确定要删除"${props.targetName}"吗？`
      : '确定要删除这条记录吗？'
  } else {
    return props.selectedCount > 0
      ? `确定要删除选中的 ${props.selectedCount} 项吗？`
      : '确定要删除选中的记录吗？'
  }
})

/**
 * 计算当前警告提示
 */
const currentWarningTip = computed(() => {
  // 优先使用预设配置中的警告提示
  if (currentPreset.value?.warningTip) {
    return currentPreset.value.warningTip
  }

  if (props.warningTip) {
    return props.warningTip
  }

  // 优先使用预设配置中的类型
  const type = currentPreset.value?.type || props.type
  const config = typeConfigs[type]
  return config?.warningTip || ''
})

/**
 * 计算当前确认按钮文案
 */
const currentConfirmText = computed(() => {
  // 优先使用预设配置中的确认按钮文案
  if (currentPreset.value?.confirmText) {
    return currentPreset.value.confirmText
  }
  return props.confirmText
})

/**
 * 计算当前取消按钮文案
 */
const currentCancelText = computed(() => {
  return props.cancelText
})

/**
 * 计算当前确认按钮类型
 */
const currentConfirmType = computed(() => {
  // 优先使用预设配置中的确认按钮类型
  if (currentPreset.value?.confirmType) {
    return currentPreset.value.confirmType
  }

  if (props.confirmType) {
    return props.confirmType
  }

  // 优先使用预设配置中的类型
  const type = currentPreset.value?.type || props.type
  const config = typeConfigs[type]
  return config?.confirmType || 'primary'
})

/**
 * 处理确认操作
 */
const handleConfirm = (): void => {
  emit('confirm')
}

/**
 * 处理取消操作
 */
const handleCancel = (): void => {
  console.log('[CrudConfirmDialog] handleCancel called, loading:', props.loading)
  if (props.loading) {
    console.warn('[CrudConfirmDialog] 取消关闭弹窗，因为 loading=true')
    return // loading 时不允许关闭
  }
  console.log('[CrudConfirmDialog] 弹窗关闭，loading:', props.loading)
  emit('update:visible', false)
  emit('cancel')
}
</script>

<style lang="scss" scoped>
.crud-confirm-dialog {
  :deep(.el-dialog__header) {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #f0f0f0;
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  :deep(.el-dialog__footer) {
    padding: 10px 20px 20px;
    border-top: 1px solid #f0f0f0;
  }
}

/**
 * 确认内容样式
 */
.crud-confirm-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 0;

  .confirm-icon {
    flex-shrink: 0;
    margin-top: 4px;
  }

  .confirm-text {
    flex: 1;

    .main-text {
      margin: 0 0 8px 0;
      font-size: 16px;
      color: #333;
      line-height: 1.5;
      font-weight: 500;
    }

    .warning-tip {
      margin: 12px 0 0 0;
      font-size: 14px;
      color: #E6A23C;
      line-height: 1.4;
    }
  }
}

// 深色模式
@media (prefers-color-scheme: dark) {
  .crud-confirm-dialog {
    :deep(.el-dialog__header) {
      border-bottom-color: $border-color-light-dark;
    }

    :deep(.el-dialog__body) {
      color: $text-color-primary-dark;
    }

    :deep(.el-dialog__footer) {
      border-top-color: $border-color-light-dark;
    }
  }

  .crud-confirm-content {
    .confirm-text {
      .main-text {
        color: $text-color-primary-dark;
      }
    }
  }
}

/**
 * 对话框底部样式
 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/**
 * 响应式设计
 */
@media (max-width: 768px) {
  .crud-confirm-dialog {
    :deep(.el-dialog) {
      width: 90% !important;
      margin: 5vh auto;
    }
  }

  .crud-confirm-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;

    .confirm-icon {
      margin-top: 0;
    }
  }

  .dialog-footer {
    flex-direction: column-reverse;
    gap: 8px;

    .el-button {
      width: 100%;
    }
  }
}
</style>
